<template>
  <view class="link_rel">
    <view class="info_con">
      <text class="text_link">文章链接：</text>
      <textarea name="文章链接" id="" cols="30" rows="10" v-model="text_con"></textarea>
      <view class="info_bottom">
        <image :src="sub_img" mode="widthFix"></image>
        <text>是否需要提醒</text>
        <switch @change="changeSwitch()"  color='#1684FC' />
      </view>
    </view>
  <button type="default" @click="submit()" >提交</button>
  <uni-popup ref="inputDialog" type="dialog">
  				<uni-popup-dialog ref="inputClose"  mode="input" title="请输入活动时间" v-model="time"
  					placeholder="请按2022-5-20模式输入" @confirm="dialogConfirm"></uni-popup-dialog>
  			</uni-popup>
        <uni-popup ref="message" type="message">
        				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
        			</uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        switchBtn:false,
        text_con:'',
        sub_img:"../../static/false_sub.png",
        time:'',
        messageText:'',
        msgType:''
      };
    },
    methods:{
      submit(){
        if(this.text_con.length==0){
          this.msgType = 'error'
          this.messageText = "请输入文章链接"
          this.$refs.message.open()
        }
        else{
          uni.showToast({
            title:"发布成功！",
          })
          setTimeout(function(){
            uni.switchTab({
              url:'../../pages/My/My'
            })
          },2000)
        }
      },
      dialogConfirm() {
      		uni.showToast({
      		  title:"输入成功！"
      		})
      			},
      changeSwitch(){
        this.switchBtn=!this.switchBtn;
        if(this.switchBtn){
          this.sub_img="../../static/true_sub.png";
          this.$refs.inputDialog.open()
        }else{
          this.sub_img="../../static/false_sub.png";
        }
      }
    }
  }
</script>

<style lang="scss">
.link_rel{
  button{
    background-color: #1684FC!important;
    color: white;
    width: 70%;
    margin: 20px auto;
  }
  .info_con{
    margin-top: 15px;
    background-color: #fff;
    padding-top: 20px;
    .text_link{
      margin-left: 21px;
      margin-top: 21px;
    }
    textarea{
      margin: 0 auto;
      margin-top: 16px;
      width: 290px;
      height: 140px;
      border-radius: 8px 8px 8px 8px;
      background-color: rgba(225, 227, 230, 100);
      color: rgba(136, 136, 136, 100);
      font-size: 16px;
      text-align: left;
      padding: 10px;
      font-family: Microsoft Yahei;
      border: 1px solid rgba(225, 227, 230, 100);
    }
    .info_bottom{
      margin-top: 25px;
      padding-top: 19px;
      padding-bottom: 18px;
      border-top: 1px solid rgba(225, 227, 230, 100);;
      display: flex;
      align-content: center;
      image{
        width: 27px;
        margin-left: 21px;
      }
      text{
        margin-left: 9px;
      }
      switch{
        margin-left: 162px;
      }
    }
  }
}
</style>
